<template>
  <div class="main-area">
    <Tabs type="card" v-model="activeType" @on-click="handleTabsClick">
      <TabPane label="已发布" value="1" />
      <TabPane label="未发布" value="2" />
    </Tabs>
    <div class="search-area">
      <Form :model="searchObject" :label-width="80" label-position="left">
      <Row :gutter="16" type="flex" justify="space-between">
          <Col span="8">
            <FormItem label="标题:">
                <Input search v-model="searchName" placeholder="请输入标题" @on-search="handleSearchName"></Input>
            </FormItem>
          </Col>
          <Col span="8" class="oper-btn">
            <Button type="primary" shape="circle" icon="ios-search" @click="handleSearch">查询</Button>
            <Button shape="circle" icon="ios-refresh-circle-outline" @click="handleReset">重置</Button>
            <Icon v-if="activeType != 2" type="md-add-circle" size="28" @click="add" />
            <Icon type="md-trash" size="28" @click="deleteMore" />
          </Col>
      </Row>
      </Form>
    </div>
    <TScope
    :tableData="dataList"
    :columns="columns"
    :loadingT="loadingTb"
    :total="tableTotal"
    @handle-select="handleSelectRow"
    @handle-change="handlePageChange"
    @handle-page-size-change="handlePageSizeChange"
    />

    <!-- 新增/修改公告 -->
    <ModalWin
    v-if="modalShow"
    :modalShow.sync="modalShow"
    :modelObiect="modelObiect"
    :data-transmission="rowDetail"
    @on-isshow-change="changeIsShowDialog"
    @child-operation="handleDialog"
    >
      <div slot="mainContent">
        <NoticeInfo :noticeInfo="rowDetail" />
      </div>
    </ModalWin>

  </div>
</template>

<script>
import ModalWin from '@/components/Modal';
import NoticeInfo from '@/components/NoticeInfo';
import TScope from '@/components/TableScope/index.vue';
import TableMinix from '@/utils/tableMinix.js';
import { noticeManage,addNotice,updataNotice, deleteNotice } from '@/request/api.js';
const dataLabel = [
  { type: 'selection', width: 60, align: 'center' },
  { title: '标题', key: 'title' },
  { title: '类型', key: 'typeName' },
  { title: '发布人', key: 'release' },
  { title: '发布时间', key: 'releaseTime' },
  {
    title: 'Action',
    key: 'action',
    width: 150,
    align: 'center',
    render: (h, params) => {
      return h('div', [
        h('Button', {
          props: {
            type: 'primary',
            size: 'small'
          },
          style: {
            marginRight: '5px'
          },
          on: {
            click: () => {
              window.show(params);
            }
          }
        }, '详情'),
        h('Button', {
          props: {
            type: 'error',
            size: 'small'
          },
          on: {
            click: () => {
              window.remove(params);
            }
          }
        }, '删除')
      ]);
    }
  }
];

export default{
  data() {
    return {
      // 查询/列表
      searchObject: {
        _page: 1,
        _limit: 10
      },
      searchName: '',
      dataList: [],
      tableTotal: 0,
      columns: dataLabel,
      loadingTb: true,
      // 弹窗
      modalShow: false,
      modelObiect: {
        title: '',
        modalShow: false,
        okText: '确定',
        cancelText: '取消',
        sureEventType: 'info'
      },
      updateTitle: '修改公告信息',
      activeType: 0
    };
  },
  components: {
    TScope,
    ModalWin,
    NoticeInfo
  },
  mixins:[TableMinix],
  created() {
    this.getList();
  },
  methods:{
    getList() {
      this.searchObject.releaseState = this.activeType + 1;
      noticeManage(this.searchObject).then((res) => {
        this.dataList = res;
        this.dataList.forEach(item => {
          if (item.type == 1) {
            item.typeName = '热门';
          } else if (item.type == 2) {
            item.typeName = '推荐';
          } else {
            item.typeName = '公告';
          }

        });
        this.loadingTb = false;
      }).catch((err) => {
        console.log(err);
      });

      const obj = {
        releaseState: this.activeType + 1
      };
      noticeManage(obj).then((res) => {
        this.tableTotal = res.length;
      }).catch((err) => {
        console.log(err);
      });
    },
    handleSearch() {
      this.searchObject.q = this.searchName.trim();
      this.getList();
    },
    handleReset() {
      delete this.searchObject.q;
      this.searchName = '';
      this.getList();
    },
    handleSearchName(value) {
      if (value) {
        this.searchObject.q = value.trim();
      } else {
        delete this.searchObject.q;
      }
      this.getList();
    },
    add() {
      this.rowDetail = {};
      this.rowDetail.releaseState = this.activeType + 1;
      this.modalShow = true;
      this.modelObiect.title = '新增公告';
    },
    changeIsShowDialog(val) {
      this.modalShow = val;
    },
    handleDialog(val) {
      this.modalShow = false;
      if (!val.hasOwnProperty('id')) {
        val.id = this.tableTotal + 1;
        addNotice(val).then((res) => {
          this.$Message.success({content: '新增成功！'});
          this.getList();
        });
      } else {
        updataNotice(val).then((res) => {
          this.$Message.success({content: '修改成功！'});
          this.getList();
        });
      }
    },
    strikeOut(id) {
      deleteNotice(id).then((res) => {
        this.$Message.success({content: '删除成功！'});
        this.getList();
      }).catch(() => {
        this.$Message.error({content: '删除失败！'});
      });
    },
    deleteMore() {
      if (this.selectRows.length == 0) {
        this.$Message.info({content: '请选择需要删除的数据！'});
      } else {
        // this.$Modal.confirm({content: '确定要删除选中的数据么？'});
      }
    },
    handleTabsClick() {
      // Object.assign(this.$data, this.$options.data());
      Object.assign(this.$data.searchObject, this.$options.data().searchObject);
      this.rowDetail.activeType = this.activeType;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-form-item{
  margin: 0;
}
.oper-btn{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  button{
    margin-right: 0.625rem;
  }
}
</style>
